<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/">门店管理</a></el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 表单 -->
		<el-form ref="form" :inline="true" style="margin-top: 20px;">
			<el-form-item label="门店名称">
				<el-input v-model="store.keyword" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;" clearable></el-input>
			</el-form-item>
			<el-form-item label="门店手机号">
				<el-input v-model="store.phone" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;" clearable></el-input>
			</el-form-item>
			<el-form-item label="提交日期">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" size="small"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;"
					@click="querySearchShopList">搜索</el-button>
			</el-form-item><br />
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;" @click="open">新增门店</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<template>
			<el-table :data="shoreList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
				<el-table-column prop="shopName" label="门店">
				</el-table-column>
				<el-table-column prop="shopId" label="ID">
				</el-table-column>
				<el-table-column prop="shopPhone" label="门店手机号">
				</el-table-column>
				<el-table-column prop="shopAddress" label="门店地址">
				</el-table-column>
				<el-table-column prop="shopDescribe" label="营业时间">
				</el-table-column>
				<el-table-column prop="shopCommunitySort" label="关联小区">
				</el-table-column>
				<el-table-column prop="shopOrderCount" label="订单总数">
				</el-table-column>
				<el-table-column prop="addTime" label="提交时间">
				</el-table-column>
				<el-table-column label="状态">
				</el-table-column>
				<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- <el-button size="mini" type="primary" style="margin-left: 10px;" @click="edit(scope.row)">修改</el-button> -->
					<el-link :underline="false" type="primary" style="font-size: 12px;" @click="edit(scope.row)">修改门店信息</el-link>
				</template>	
				</el-table-column>
			</el-table>
		</template>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="store.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="store.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog :title="title" :visible.sync="show" @close="concel">
			<el-form :model="storeData">
				<el-form-item label="门店名称" label-width="120px">
					<el-input v-model="storeData.shopName" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="门店手机号" label-width="120px">
					<el-input v-model="storeData.shopPhone" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" label-width="120px">
					<el-cascader v-model="address" :options="city">
					</el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" label-width="120px">
					<el-input v-model="storeData.shopAddress" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="门店坐标" label-width="120px">
					<el-button @click="getLoction">获取位置</el-button>
					<span v-show="storeData.shopLongitude">{{storeData.shopLongitude}},{{storeData.shopLatitude}}</span>
				</el-form-item>
				<el-form-item label="营业时间" label-width="120px">
					<el-input v-model="storeData.shopDescribe" style="width: 500px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="concel">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				store: {
					keyword: '',
					phone: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
				},
				date: [],
				shoreList: [],
				total: 1,
				show: false,
				title: '新增门店',
				storeData: {
					shopAddress: "",//地址
					shopCity: "",//市
					shopDescribe: "",//时间
					shopDistrict: "",//区
					shopImage: "",//照片
					shopLatitude: "",//经度
					shopLongitude: "",//纬度
					shopName: "",//名字
					shopPhone: "",//手机号
					shopProvince: "",//省
				},
				address:[],
				city:citys,
			}
		},
		methods: {
			//修改
			edit(row){
				this.storeData=row
				this.title='修改门店信息'
				this.show=true
				this.address=[this.storeData.shopProvince,this.storeData.shopCity,this.storeData.shopDistrict]
			},
			//取消
			concel(){
				this.storeData={
						shopAddress: "",//地址
						shopCity: "",//市
						shopDescribe: "",//时间
						shopDistrict: "",//区
						shopImage: "",//照片
						shopLatitude: "",//经度
						shopLongitude: "",//纬度
						shopName: "",//名字
						shopPhone: "",//手机号
						shopProvince: "",//省
				},
				this.address=[],
				this.show=false	
			},
			//获取坐标，和增加一样，直接调接口
			getLoction(){
				if (!this.storeData.shopProvince) {
					this.$message.error('请先选择地区')
					return false
				}
				let address = this.storeData.shopProvince+this.storeData.shopCity+this.storeData.shopDistrict+this.storeData.shopAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo',{
					params:{
						key:'457886b5972a97e93fb9cdccebfd450f',
						'address':address
					}
				})
				.then(res=>{
					let addr = res.data.geocodes[0].location
					this.storeData.shopLongitude = addr.split(',')[0]
					this.storeData.shopLatitude = addr.split(",")[1]
				})
			},
			//确定,调接口来添加
			sure(){
				if (!this.storeData.shopName) {
					this.$message.error('请先完善信息！')
					return false
				}
				if(this.title=='新增门店'){
					this.$http.post('shop/addShop',this.storeData)
					.then(res=>{
						if(res.data.status==200){
							this.$message.success('添加成功！')
							this.show = false
							this.querySearchShopList()
						}else{
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(error=>{
						this.$message.error('服务器异常！')
					})
				}else if(this.title=='修改门店信息'){
					this.$http.post('shop/modifyShop',this.storeData)
					.then(res=>{
						if(res.data.status==200){
							this.$message.success('修改成功！')
							this.show=false
							this.querySearchShopList()
						}else{
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(error=>{
						this.$message.error('服务器异常！')
					})
				}
			},
			//打开弹出框
			open(){
				this.show=true
				this.title='新增门店'
			},
			//查询接口信息
			querySearchShopList() {
				this.$http.get('shop/querySearchShopList', {
						params: this.store
					})
					.then(res => {
						if (res.data.status == 200) {
							this.shoreList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器异常接口！')
						}
					})
					.catch(error => {
						this.$message.error('服务器异常！')
					})
			},
			handleSizeChange(val) {
				this.store.pageSize = val;
				this.store.pageNum = 1
				this.querySearchShopList()
			},
			handleCurrentChange(val) {
				this.store.pageNum = val;
				this.querySearchShopList()
			}
		},
		watch: {
			date() {
				if (this.date) { //判断date是否存在
					this.store.startTime = this.date[0];
					this.store.endTime = this.date[1];
				} else {
					this.store.startTime = ''
					this.store.endTime = ''
				}
			},
			//获取经纬度时需要监视address属性
			address(){
				this.storeData.shopProvince=this.address[0];
				this.storeData.shopCity=this.address[1];
				this.storeData.shopDistrict=this.address[2];
			}
		},
		mounted() {
			this.querySearchShopList()
		}
	}
</script>

<style scoped>

</style>